<template>
  <div>
    <h2>时间戳转换器</h2>
    <div class="container timestamp-converter">
      <div >
        <input
          type="number"
          v-model.number="timestampInput"
          placeholder="输入时间戳"
        />
        <button @click="convertToFormattedTime" class="execute-button">转换</button>
        <p>{{ formattedTime }}</p>
      </div>
    </div>
  </div>    
  </template>
  
  <script>
  export default {
    data() {
      return {
        timestampInput: null,
        formattedTime: '',
        formattedDateInput: '',
        timestampOutput: null,
      };
    },
    methods: {
      convertToFormattedTime() {
        if (this.timestampInput !== null && this.timestampInput >= 0) {
          const date = new Date(this.timestampInput * 1000);
          const options = {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
          };
          this.formattedTime = date.toLocaleString('zh-CN', options);
        } else {
          this.formattedTime = '请输入有效的时间戳';
        }
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
    @use "../assets/common.scss";

  .timestamp-converter {
    max-width: 400px;
  }
  
  input {
    width: 80%;
    padding: 10px;
    margin-top: 10px;
  }
  
  p {
    font-size: 1.2em;
    margin-top: 10px;
    color: #333;
  }
  
  .error {
    color: red;
  }
  </style>